<template>
    <teleport to="body">
        <transition name="fade">
            <div v-if="visible" class="image-preview-overlay" @click="closePreview">
                <div class="image-preview-container" @click.stop>
                    <!-- 关闭按钮 -->
                    <div class="preview-close" @click="closePreview">
                        <el-icon>
                            <Close />
                        </el-icon>
                    </div>

                    <!-- 图片显示区域 -->
                    <div class="preview-content">
                        <img :src="currentImage" :alt="currentFileName" class="preview-image" />
                    </div>

                    <!-- 导航控制 -->
                    <div v-if="images.length > 1" class="preview-navigation">
                        <el-button class="nav-button prev-button" :disabled="currentIndex === 0" @click="prevImage"
                            circle>
                            <el-icon>
                                <ArrowLeft />
                            </el-icon>
                        </el-button>

                        <div class="image-counter">
                            {{ currentIndex + 1 }} / {{ images.length }}
                        </div>

                        <el-button class="nav-button next-button" :disabled="currentIndex === images.length - 1"
                            @click="nextImage" circle>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                    </div>

                    <!-- 文件信息 -->
                    <div class="preview-info">
                        <div class="file-name">{{ currentFileName }}</div>
                        <div class="file-size">{{ currentFileSize }}</div>
                    </div>
                </div>
            </div>
        </transition>
    </teleport>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

interface ImageInfo {
    url: string
    fileName: string
    fileSize?: string
}

const props = defineProps<{
    images: ImageInfo[]
    initialIndex?: number
}>()

const emit = defineEmits(['close'])

const visible = ref(false)
const currentIndex = ref(props.initialIndex || 0)

const currentImage = computed(() => props.images[currentIndex.value]?.url || '')
const currentFileName = computed(() => props.images[currentIndex.value]?.fileName || '')
const currentFileSize = computed(() => props.images[currentIndex.value]?.fileSize || '')

// 打开预览
function openPreview(index: number = 0) {
    currentIndex.value = index
    visible.value = true
    // 禁止背景滚动
    document.body.style.overflow = 'hidden'
}

// 关闭预览
function closePreview() {
    visible.value = false
    // 恢复背景滚动
    document.body.style.overflow = ''
    emit('close')
}

// 上一张图片
function prevImage() {
    if (currentIndex.value > 0) {
        currentIndex.value--
    }
}

// 下一张图片
function nextImage() {
    if (currentIndex.value < props.images.length - 1) {
        currentIndex.value++
    }
}

// 键盘事件监听
function handleKeyDown(event: KeyboardEvent) {
    if (!visible.value) return

    switch (event.key) {
        case 'Escape':
            closePreview()
            break
        case 'ArrowLeft':
            prevImage()
            break
        case 'ArrowRight':
            nextImage()
            break
    }
}

// 监听键盘事件
watch(visible, (newVisible) => {
    if (newVisible) {
        window.addEventListener('keydown', handleKeyDown)
    } else {
        window.removeEventListener('keydown', handleKeyDown)
    }
})

// 暴露方法给父组件
defineExpose({
    openPreview,
    closePreview
})
</script>

<style scoped>
.image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.image-preview-container {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 40px 20px 20px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 10;
}

.preview-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

.preview-close .el-icon {
    font-size: 18px;
    color: #333;
}

.preview-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    max-height: 70vh;
    margin-bottom: 20px;
}

.preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.preview-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.nav-button {
    width: 48px;
    height: 48px;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    transition: background-color 0.2s;
}

.nav-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.2);
}

.nav-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.image-counter {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.preview-info {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.file-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-break: break-all;
}

.file-size {
    font-size: 12px;
    color: #999;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>